import React from 'react';
// import { useHistory  } from 'react-router-dom' // hook
import { Form, Input, Button, Divider , message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { LoginFn } from "../../api/login"
import { connect } from "react-redux"
import * as types from "../../store/types.js"

const Com = ({loginFnData , history}) => {

    // const history = useHistory()
    const onFinish = (values) => {
        LoginFn(values).then(res => {
            console.log(res);
            if (res.data.code === '10005') {
                message.error('管理员账号不存在')
              } else if (res.data.code === '10003') {
                message.error('密码错误')
              } else {
                message.success('登录成功')
                loginFnData(res.data.data)
            
                history.push('/')
                // setTimeout(() => {
                //     history.push('/')
                // }, 1000);
            }
        })
        // console.log('表单内容为：', values);
    }

    return (
        <div  id='components-form-demo-normal-login' >
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                remember: true,
                }}
                onFinish={onFinish}
            >
                <h3 style={{textAlign:'center' , fontSize:26 , color:'#d6d1d1'}}>后台管理</h3>
                <Divider style={{color:'#d6d1d1'}}></Divider>
                <Form.Item
                    name="adminname"
                    rules={[
                        {
                        required: true,
                        message: '请输入正确的账号！',
                        },
                    ]}
                >
                    <Input 
                        prefix={<UserOutlined className="site-form-item-icon" />} 
                        placeholder="请输入账号....." 

                    />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        {
                        required: true,
                        message: '请输入正确的密码！',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请输入密码.."
                    />
                </Form.Item>
              
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                    登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
        
    );

}

export default connect(
    null,
    (dispatch) => {
        return {
            loginFnData({adminname , token , role}){
                dispatch({type:types.CHANGE_ADMIN_NAME, payload:adminname})
                dispatch({type:types.CHANGE_TOKEN , payload:token})
                dispatch({type:types.CHANGE_ROLE , payload:role})
                dispatch({type:types.CHANGE_LOGIN_STATE , payload:true})
            }
        }
    }
)(Com)

